@import "./vars.scss";
// -------------------------------------------
// 大架构 #header #footer 栅格系统 多处通用的某一整块(较大)样式 以及一些.w100
.site_logo .link {
  @include display(flex);
  @include align-items(center);

  .site_logo-line {
    width: 1px;
    height: 36px;
    background-color: #fff;
    opacity: 0.4;
    margin-left: 30px;
    margin-right: 28px;
    @include transition(background-color 1s);
  }
}

.mob-header-line {
  display: none;
  @include align-items(center);
  width: 100%;
  height: 68px;
  background-color: #fff;
  box-shadow: 0 0.1vw 0.62vw 0 rgba(0, 0, 0, 0.1);
  .site_logo {
    padding-left: 15px;
    .site_logo-line {
      background-color: #000 !important;
      margin: 0 15px;
    }
    .link {
      .site_logo-line {
        height: 25px;
      }
    }
    a:first-child {
      img {
        width: 60px;
      }
    }
    a:last-child {
      img {
        width: 30px;
      }
    }
  }
  
  .sub-nav2 {
    display: none;
  }
  .cl-logo {
    @include display(flex);

    @include align-items(center);
    width: 100px;
    height: 100%;
    margin-left: 8%;

    img {
      width: 100%;
    }
  }

  .nav {
    display: inline-block;
    position: absolute;
    width: auto;
    border: none;
    top: 0;
    right: 0;

    .btn-nav {
      position: absolute;
      z-index: 9;
      padding: 15px 22px;
      top: 0;
      right: 0;
      border-radius: 0;
      background: transparent;
      border: none;
      @include transition(all 0.5s ease);
      cursor: pointer;

      .icon-bar {
        display: block;
        width: 24px;
        height: 2px;
        margin: 8px 0;
        background-color: #999;
        @include transition(all 0.7s ease);
      }

      &:hover .icon-bar {
        @include transition(all 1s ease);
        background-color: #fca311;
      }

      .middle {
        margin: 0 auto;
      }
    }
  }

  .nav-content {
    display: none;
    color: #333;
    position: fixed;
    text-align: center;
    align-items: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    cursor: default;
    z-index: 8;
    overflow-y: auto;

    a {
      display: block;
      height: 45px;
      line-height: 45px;
      text-decoration: none;

      &:hover {
        background-color: #000;
        color: #fff;
        // .cTrans();
      }
    }

    .nav-list {
      position: relative;
      padding: 0;
      top: 50%;
      list-style: none;
      width: 100%;
      transform: translateY(-50%);

      .nav-item:last-child {
        height: 50px;
      }
      .nav-item,
      .nav-item2 {
        margin-top: 15px;
      }
    }

    .search-box {
      width: 100%;

      .form {
        width: 100%;

        @include display(flex);

        @include justify-content(center);

        @include align-items(center);
      }

      .search-input {
        display: inline-block;
        border: 1px solid #999;
        width: 50%;
        height: 40px;
        overflow: hidden;
        margin-right: 10px;

        input {
          height: 100%;
          line-height: 100%;
          border: 0;
          width: 100%;
          padding: 0 5%;
        }
      }

      .search-btn {
        border: 0;
        background-color: transparent;
      }
    }
  }

  .animated {
    display: block;
    margin: 0 auto;

    &:hover .icon-bar,
    &:focus .icon-bar {
      background-color: #fca311;
    }

    &:focus {
      cursor: pointer;
    }

    .icon-bar {
      background-color: #fca311 !important;
    }

    .top {
      @include transform(translateY(10px) rotateZ(45deg));
    }

    .bottom {
      @include transform(translateY(-10px) rotateZ(-45deg));
    }

    .middle {
      width: 0 !important;
    }
  }
}


// about页面的地图区域
.company_profile {
  .map-pic img {
    width: 100%;
  }
  .circle {
    width: 10px;
    height: 10px;
  }
  .info {
    position: absolute;
    width: 150px;
    top: -30px;
    left: 40px;
    font-size: 14px;
    line-height: 1.3;
    opacity: 0;
    @include transform(translateY(-50px));
    @include transition(all 1s);
    &.on {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .mark1 {
    position: absolute;
    top: 45%;
    right: 12%;
  }
  .mark2 {
    position: absolute;
    top: 51%;
    right: 14%;
  }
  .absn-h4 {
    font-size: 24px;
    font-weight: bold;
    margin-top: px2vw(68);
  }
  .absn-h4-p {
    margin-top: px2vw(46);
    line-height: 28px;
    @include line-clamp(4);
  }
  .absn-h5 {
    font-size: 18px;
    margin-top: 37px;
  }
  .absn-h5-p {
    line-height: 28px;
    margin-top: 5px;
    font-size: 15px;
    @include line-clamp(3);
  }
}

// 首页与about页面中的 our service 模块
.bservice-section {
  padding-bottom: 91px;
  .service_h2 {
    padding-top: 133px;
    padding-bottom: 80px;
    text-align: center;
  }

  .service-iconbox {
    @include display(flex);
    @include justify-content(space-between);

    .service-iconbox-tab {
      overflow: hidden;
      cursor: pointer;
      .iconfont {
        font-size: 33px;
        color: $color3;
        display: inline-block;
      }

      &.on {
        .iconfont {
          color: $active;
        }
      }
    }
  }

  .service-linebox {
    position: relative;
    @include display(flex);
    @include align-items(center);
    height: 72px;
    .service-line1 {
      position: absolute;
      top: 50%;
      left: 2%;
      right: 2%;
      margin-top: -1px;
      height: 2px;
      width: 96%;
      background-color: $border1;
    }
    .service-line2 {
      position: absolute;
      @include transition(width 0.3s linear);
      top: 50%;
      left: 2%;
      right: 2%;
      margin-top: -1px;
      height: 2px;
      width: 0;
      background-color: $active;
    }
    .dot-wrapper {
      @include display(flex);
      @include justify-content(space-between);
      width: 100%;
      position: relative;
      padding: 0 10px;
    }
    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: $dot;
      background-clip: content-box;
      cursor: pointer;
      position: relative;
      span {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: transparent;
        top: 50%;
        margin-top: -10px;
        left: 50%;
        margin-left: -10px;
      }
      &.on {
        background-color: $active;
        display: block !important;
      }
      &.circle {
        display: none;
        &:after,
        &:before {
          background-color: $active;
          animation-name: scale2;
        }
      }
    }
  }

  .service-body {
    position: relative;
    width: 432px;
    max-width: 100%;
    margin: 30px auto 0;
    line-height: 34px;
    text-align: center;
    font-size: 16px;

    .service-item {
      position: absolute;
      opacity: 0;
      height: 200px;
      background-color: #fff;
      @include transition(opacity 0.8s);
      pointer-events: none;
      &:first-child {
        span {
          opacity: 0;
        }
      }

      &.on {
        z-index: 2;
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
}
.banner-swiper {
  position: relative;
  .arrow-paging {
    display: flex;
    position: absolute;
    top: 65%;
    left: 160px;
    z-index: 999;
  }
  .arrow-left {
    outline: none;
    cursor: pointer;
    // position: absolute;
    // right: 66px;
    // top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.3);
    // box-shadow: 0 0 2px rgba(0,0,0,0.5);
    border-radius: 50%;
    // margin-top: -24px;
    width: 48px;
    height: 48px;
    margin-right: 15px;
    .iconfont {
      font-size: 16px;
      color: #fff;
    }
  }
  .arrow-right {
    outline: none;
    cursor: pointer;
    // position: absolute;
    // right: 66px;
    // top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    // margin-top: -24px;
    width: 48px;
    height: 48px;
    z-index: 999;
    outline: none;
    .iconfont {
      font-size: 16px;
      color: #fff;
    }
  }
}
// 头部
.header {
  position: relative;
  height: 100vh;
  font-size: 16px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;

  .header-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    will-change: transform;
    object-fit: cover;
  }

  &.subpage-header {
    max-height: 601px;
    height: 70vh;
    background-position: bottom center;
  }

  .banner {
    width: 100%;
    object-fit: cover;
    height: inherit;
  }

  .header-section {
    position: absolute;
    top: 0;
    left: 80px;
    right: 80px;
    bottom: 0;
    height: 100%;
    @include display(flex);
    @include flex-direction(column);
  }

  .header-center {
    width: 100%;
    position: absolute;
    top: 55%;
    left: 0;
    right: 0;
    // margin-top: -26px;
    text-align: center;

    &.index-header-center {
      @include transform(translateY(-50%));
      margin-top: 0;
    }
    .cm-svg-link {
      cursor: pointer;
      margin-top: 25px;
      display: block;
    }

    .cm-svg {
      transition: all 1s;
      &.on {
        .em-rect,
        .em-text {
          animation: stroke 2s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }
      }
    }
    .em-rect {
      stroke-dasharray: 408;
      stroke-dashoffset: 408;
      stroke: #fff;
      stroke-width: 2;
      transition: all 1s;
    }
    .em-text {
      stroke-dashoffset: 200;
      stroke-dasharray: 200;
      stroke: #fff;
      stroke-width: 2;
      fill: transparent;
      transition: all 1s;
    }

    @-webkit-keyframes stroke {
      100% {
        stroke-dashoffset: 0;
      }
    }
    @keyframes stroke {
      100% {
        stroke-dashoffset: 0;
      }
    }

    .hec-h2 {
      font-size: 34px;
      height: 33px;
      padding-left: 80px;
      overflow: hidden;
      text-align: left;
      font-weight: bold;
      a {
        position: relative;
        display: block;
      }
      div {
        will-change: transform;
      }
    }
    .hec-p {
      padding-left: 80px;
      margin-top: px2vw(30);
      display: block;
      font-size: 16px;
      line-height: 1.5;
      text-align: left;
    }
  }

  .header-footer {
    position: absolute;
    bottom: 80px;
    width: 100%;
    left: 0;
    right: 0;
    @include display(flex);
    @include justify-content(space-between);

    .fup1 {
      height: 48px;
      overflow: hidden;
    }
    .fup2 {
      height: 100px;
      overflow: hidden;
    }

    .hef-position {
      @include display(flex);
      @include align-items(center);

      .hef-icon {
        font-size: 33px;
        margin-right: 24px;
      }

      .heft-position-text {
        line-height: 18px;
      }
    }

    .hef-mouseIcon {
      position: absolute;
      left: 50%;
      margin-left: -17px;
      animation: mouseIconAnimate 3s linear infinite;
      animation-direction: alternate;
      cursor: pointer;
      font-size: 34px;
    }

    .hef-info {
      @include display(flex);
      @include align-items(center);

      .hef-phoneIcon {
        font-size: 25px;
        margin-left: 24px;
      }
    }
  }
}
.top-line {
  position: fixed;
  cursor: default;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  @include transition(transform 1s linear);
  height: 85px;

  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    transform: translateY(-200%);
    opacity: 0;
    transition-timing-function: cubic-bezier(1, 0, 0, 1);
    box-shadow: 0 7px 32px -12px rgba(192, 196, 204, 0.72);
    transform-origin: right center;
    left: 0;
    top: 0;
    transition: all 0.6s;
    background-color: rgba(255, 255, 255, 1);
    width: 100%;
    height: 100%;
  }
  .header-line {
    position: relative;
    z-index: 2;
    padding: 0 80px;
    height: 100%;
    @include display(flex);
    @include align-items(center);

    .site_logo {
      height: 100%;
      @include display(flex);
      @include align-items(center);
    }

    .navbar {
      height: 100%;
      position: relative;
      @include display(flex);
      @include align-items(center);
      .navbar-link-wrapper {
        height: 100%;
        @include display(flex);
        @include align-items(center);
        position: relative;
        font-size: 16px;
        margin: 0 50px;

        .navbar-link {
          position: relative;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
          color: #fff;
          &::before {
            content: "";
            width: 0%;
            @include transition(width 1s);
            height: 1px;
            position: absolute;
            bottom: -8px;
            background-color: #fff;
            left: 0;
          }
        }

        .subnav {
          @include display(flex);
          @include flex-direction(column);
          position: absolute;
          top: 80px;
          left: 50%;
          opacity: 0;
          width: 214px;
          margin-left: -107px;
          transform: translate3d(0%, 20px, 0);
          transition: all 1s;
          pointer-events: none;
          border-radius: 6px;
          box-shadow: 0 7px 32px rgba(192, 196, 204, 0.72);

          &::before {
            position: absolute;
            top: -8px;
            content: "";
            left: 0;
            right: 0;
            height: 11px;
          }
          &::after {
            content: "";
            width: 0;
            height: 0;
            border-bottom: 11px solid rgba(255, 255, 255, 1);
            border-right: 11px dashed transparent;
            border-left: 11px dashed transparent;
            position: absolute;
            top: -8px;
            left: 50%;
            margin-left: -8px;
            z-index: 2;
          }
          .subnav-box {
            background-color: #fff;
            border-radius: 6px;
            overflow: hidden;
            padding: 0 16px 0 21px;
          }
          /* 2块结构不同设计师让改 */
          .subnav-item {
            position: relative;
            z-index: 3;
            @include display(flex);
            @include flex-direction(column);
            font-size: 14px;
            line-height: 18px;
            padding: 16px 0;
            background-color: rgba(255, 255, 255, 1);
            color: #232323;
            transition: all 0.5s;
            &:first-child {
              padding: 27px 0 23px;
              border-bottom: 1px solid rgba(15, 15, 15, 0.12);
            }
            &:hover {
              color: #188734;
            }
          }
          .subnav-item-figure {
            width: 224px;
            height: 168px;
            overflow: hidden;
            background-color: $bg3;
            @include display(flex);
            @include align-items(center);
            @include justify-content(center);
          }
          .subnav-item-img {
            width: 80%;
            object-fit: cover;
            max-height: 80%;
          }
        }

        &.on {
          .navbar-link {
            &::before {
              width: 100%;
            }
          }
        }
        &:hover {
          .navbar-link {
            &::before {
              width: 100%;
            }
          }
          .subnav {
            opacity: 1;
            pointer-events: auto;
            transform: none;
          }
        }
      }
    }
  }

  &:hover {
    .header-line {
      .site_logo {
        .link {
          .site_logo-line {
            background-color: $color;
          }
        }
      }
    }
  }

  &.fixed {
    @include transform(translateY(0));

    &::before {
      transform: translateY(0);

      opacity: 1;
    }
    .header-line {
      .site_logo {
        .link {
          .site_logo-line {
            background-color: $color;
          }
        }
      }

      .navbar {
        .navbar-link-wrapper {
          &:hover {
            .navbar-link {
              &::before {
                background-color: $color;
              }
            }
          }
          &.on {
            .navbar-link {
              &::before {
                background-color: $color;
              }
            }
          }
          .navbar-link {
            text-shadow: 0 0 0 rgba(0, 0, 0, 0);
            color: $color;
          }
        }
      }
    }
  }
}

.blog-header {
  .header-line {
    .site_logo {
      .link {
        .site_logo-line {
          background-color: $color;
        }
      }
    }

    .navbar {
      .navbar-link-wrapper {
        &.on,
        &:hover {
          .navbar-link {
            &::before {
              background-color: $color;
            }
          }
        }
        .navbar-link {
          text-shadow: 0 0 0 rgba(0, 0, 0, 0);
          color: $color;
        }
      }
    }
  }
}

// 底部
.footer {
  position: relative;
  background-color: $footer;
  // margin-top: 58px;
  padding-top: 115px;
  padding-bottom: 51px;
  color: #fff;

  .footer-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    top: px2per2(78, 655);
    left: px2per2(281, 1920);
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      object-position: right bottom;
    }
    // background-image: url("../imgs/footer-bg.png");
    // background-position: right bottom;
    // background-size: cover;
  }

  .footer-top {
    position: relative;
    z-index: 1;
    @include display(flex);
    @include justify-content(space-between);

    .footer-left {
      @include flex-basis(px2per2(407, 1600));
      .footer-h5 {
        font-size: 22px;
      }
      .footer-input-group {
        height: 64px;
        padding: 22px 0;
        border-bottom: 2px solid #fff;
        .inpt {
          height: 20px;
          background-color: transparent;
          width: calc(100% - 24px);
          font-size: 14px;
          font-family: Roboto_REGULAR, "微软雅黑", Arial, sans-serif;
          color: #fff;
        }
        .inpt:-moz-placeholder {
          color: #fff;
          font-size: 14px;
          font-family: Roboto_REGULAR, "微软雅黑", Arial, sans-serif;
        }
        .inpt:-ms-input-placeholder {
          color: #fff;
          font-size: 14px;
          font-family: Roboto_REGULAR, "微软雅黑", Arial, sans-serif;
        }
        .inpt::-webkit-input-placeholder {
          color: #fff;
          font-size: 14px;
          font-family: Roboto_REGULAR, "微软雅黑", Arial, sans-serif;
        }
        .inpt-icon {
          font-size: 19px;
          cursor: pointer;
        }
      }

      .footer-awrapper {
        margin-top: 30px;
        color: rgba(255, 255, 255, 0.5);
        a {
          padding: 10px px2per2(34, 407) 10px 0;
          display: inline-block;
          &:last-child {
            padding-right: 0;
          }
        }
      }
    }
    .footer-right {
      @include flex-basis(px2per2(997, 1600));
      .footer-link-wrapper {
        .footer-dt {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 39px;
          cursor: default;
        }
        .footer-dd {
          line-height: 38px;
          color: rgba(255, 255, 255, 0.4);
          @include transition(color 1s);
          &:hover {
            color: #fff;
          }
        }
      }

      .footer-addrline {
        margin-top: 108px;
        font-size: 16px;
        @include display(flex);
        @include align-items(center);
        line-height: 1.375;

        .footer-addr {
          width: 60%;
          padding-right: 2%;
          flex-basis: 60%;
          @include display(flex);
          @include align-items(center);
        }

        .footer-phone {
          flex-basis: 40%;
          width: 40%;
          height: 100%;
          @include display(flex);
        }

        .fardz {
          font-size: 33px;
          margin-right: 25px;
          line-height: 1;
        }
        .farsj {
          font-size: 25px;
          margin-right: 25px;
          line-height: 1;
        }
      }
    }

    .footer-link-wrapper {
      @include display(flex);
      @include justify-content(space-between);
    }
  }

  .footer-copyright {
    margin-top: 106px;
    @include display(flex);
    @include justify-content(space-between);
    color: rgba(255, 255, 255, 0.49);
  }
}

// 表单
.index_form_wrapper {
  .index_textarea {
    width: 100%;
    height: 254px;
    background-color: $bg4;
    border-radius: 5px;
    font-size: 16px;
    padding: 12px 16px;
    line-height: 1.5;
    color: #202020;
    resize: none;
  }
  .index_form_title {
    font-size: 32px;
    font-weight: bold;
    color: $color24;
    margin-bottom: px2vw(34);
    text-align: center;
  }
  .index_form_p {
    padding: 0 px2vw(80);
    list-style: none;
    line-height: 1.5625;
    font-size: 16px;
    color: $color1;
    text-align: center;
  }
  .index_form {
    margin-top: px2vw(95);
  }
  .index_form_group {
    @include display(flex);
    margin-top: px2vw(33);
  }
  .index_input_label {
    color: #808080;
    margin-bottom: 18px;
  }
  .index_input_group {
    flex: 1;
    @include display(flex);
    @include flex-direction(column);
    margin-left: 26px;
    &:first-child {
      margin-left: 0;
    }
  }
  .index_form_submit {
    @include justify-content(center);
    margin-top: px2vw(54);
  }
  .index_input {
    background-color: $bg4;
    border-radius: 5px;
    font-size: 16px;
    padding: 12px 16px;
    line-height: 1.5;
    color: #202020;
  }
  .submit_btn {
    width: 148px;
    height: 46px;
    @include display(flex);
    @include justify-content(center);
    @include align-items(center);
    font-size: 16px;
    color: #fff;
    border-radius: 23px;
    background-color: $footer;
    cursor: pointer;
  }
}

// fcm-list 产品列表样式
.related-products {
  border-top: 1px solid #e7e7e7;
  .rekated_h4 {
    font-size: 28px;
    margin-top: 93px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 64px;
  }
}
.fcm-elem-wrapper {
  @include display(flex);
  @include flex-wrap(wrap);
  .fcm-elem {
    margin-bottom: 20px;
  }
  .fcm-elem-figure {
    width: 100%;
    height: 261px;
    background-color: $bg3;
    @include display(flex);
    @include align-items(center);
    @include justify-content(center);
    img {
      max-width: 90%;
      max-height: 100%;
    }
  }
  .fcm-elem-mark {
    color: $color16;
    margin-top: 21px;
    margin-bottom: 15px;
  }
  .fcm-elem-p {
    color: $color17;
    font-size: 16px;
    line-height: 1.187;
    word-break: break-all;
    @include line-clamp(3);
  }
}

// ----------------
.w1635 {
  width: px2per(1635);
  max-width: 1635px;
  margin-left: auto;
  margin-right: auto;
}

.w1600 {
  width: px2per(1600);
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.w1500 {
  width: px2per(1500);
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.w1430 {
  max-width: 1430px;
  width: px2per(1430);
  margin-left: auto;
  margin-right: auto;
}

.w1340 {
  max-width: 1340px;
  width: px2per(1340);
  margin-left: auto;
  margin-right: auto;
}

.w1224 {
  max-width: 1224px;
  width: px2per(1224);
  margin-left: auto;
  margin-right: auto;
}

.w1160 {
  max-width: 1160px;
  width: px2per(1160);
  margin-left: auto;
  margin-right: auto;
}

.w1032 {
  width: 1032px;
  margin-right: auto;
  margin-left: auto;
}

.w910 {
  width: 910px;
  margin-right: auto;
  margin-left: auto;
}

.w600 {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

.w368 {
  width: 368px !important;
  @include flex-basis(368px !important);
}

.w174 {
  width: 174px !important;
  @include flex-basis(174px !important);
}

.w441 {
  width: 441px !important;
  @include flex-basis(441px !important);
}

// --------------------
// 栅格系统
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.row2 {
  margin-left: -30px;
  margin-right: -30px;
}
.row3 {
  margin-left: -36px;
  margin-right: -36px;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-12 {
  @include flex-basis(100%);
  width: 100%;
}
.col-xs-11 {
  @include flex-basis(91.66666667%);
  width: 91.66666667%;
}
.col-xs-10 {
  @include flex-basis(83.33333333%);
  width: 83.33333333%;
}
.col-xs-9 {
  @include flex-basis(75%);
  width: 75%;
}
.col-xs-8 {
  @include flex-basis(66.66666667%);
  width: 66.66666667%;
}
.col-xs-7 {
  @include flex-basis(58.33333333%);
  width: 58.33333333%;
}
.col-xs-6 {
  @include flex-basis(50%);
  width: 50%;
}
.col-xs-5 {
  @include flex-basis(41.66666667%);
  width: 41.66666667%;
}
.col-xs-4 {
  @include flex-basis(33.33333333%);
  width: 33.33333333%;
}
.col-xs-3 {
  @include flex-basis(25%);
  width: 25%;
}
.col-xs-2_5 {
  @include flex-basis(20%);
  width: 20%;
}
.col-xs-2 {
  @include flex-basis(16.66666667%);
  width: 16.66666667%;
}
.col-xs-1 {
  @include flex-basis(8.33333333%);
  width: 8.33333333%;
}

@media screen and (min-width: 768px) {
  .col-sm-12 {
    @include flex-basis(100%);
    width: 100%;
  }
  .col-sm-11 {
    @include flex-basis(91.66666667%);
    width: 91.66666667%;
  }
  .col-sm-10 {
    @include flex-basis(83.33333333%);
    width: 83.33333333%;
  }
  .col-sm-9 {
    @include flex-basis(75%);
    width: 75%;
  }
  .col-sm-8 {
    @include flex-basis(66.66666667%);
    width: 66.66666667%;
  }
  .col-sm-7 {
    @include flex-basis(58.33333333%);
    width: 58.33333333%;
  }
  .col-sm-6 {
    @include flex-basis(50%);
    width: 50%;
  }
  .col-sm-5 {
    @include flex-basis(41.66666667%);
    width: 41.66666667%;
  }
  .col-sm-4 {
    @include flex-basis(33.33333333%);
    width: 33.33333333%;
  }
  .col-sm-3 {
    @include flex-basis(25%);
    width: 25%;
  }
  .col-sm-2_5 {
    @include flex-basis(20%);
    width: 20%;
  }
  .col-sm-2 {
    @include flex-basis(16.66666667%);
    width: 16.66666667%;
  }
  .col-sm-1 {
    @include flex-basis(8.33333333%);
    width: 8.33333333%;
  }
}
@media screen and (min-width: 992px) {
  .col-md-12 {
    @include flex-basis(100%);
    width: 100%;
  }
  .col-md-11 {
    @include flex-basis(91.66666667%);
    width: 91.66666667%;
  }
  .col-md-10 {
    @include flex-basis(83.33333333%);
    width: 83.33333333%;
  }
  .col-md-9 {
    @include flex-basis(75%);
    width: 75%;
  }
  .col-md-8 {
    @include flex-basis(66.66666667%);
    width: 66.66666667%;
  }
  .col-md-7 {
    @include flex-basis(58.33333333%);
    width: 58.33333333%;
  }
  .col-md-6 {
    @include flex-basis(50%);
    width: 50%;
  }
  .col-md-5 {
    @include flex-basis(41.66666667%);
    width: 41.66666667%;
  }
  .col-md-4 {
    @include flex-basis(33.33333333%);
    width: 33.33333333%;
  }
  .col-md-3 {
    @include flex-basis(25%);
    width: 25%;
  }
  .col-md-2_5 {
    @include flex-basis(20%);
    width: 20%;
  }
  .col-md-2 {
    @include flex-basis(16.66666667%);
    width: 16.66666667%;
  }
  .col-md-1 {
    @include flex-basis(8.33333333%);
    width: 8.33333333%;
  }

  
}
@media screen and (min-width: 1200px) {
  .col-lg-12 {
    @include flex-basis(100%);
    width: 100%;
  }
  .col-lg-11 {
    @include flex-basis(91.66666667%);
    width: 91.66666667%;
  }
  .col-lg-10 {
    @include flex-basis(83.33333333%);
    width: 83.33333333%;
  }
  .col-lg-9 {
    @include flex-basis(75%);
    width: 75%;
  }
  .col-lg-8 {
    @include flex-basis(66.66666667%);
    width: 66.66666667%;
  }
  .col-lg-7 {
    @include flex-basis(58.33333333%);
    width: 58.33333333%;
  }
  .col-lg-6 {
    @include flex-basis(50%);
    width: 50%;
  }
  .col-lg-5 {
    @include flex-basis(41.66666667%);
    width: 41.66666667%;
  }
  .col-lg-4 {
    @include flex-basis(33.33333333%);
    width: 33.33333333%;
  }
  .col-lg-3 {
    @include flex-basis(25%);
    width: 25%;
  }
  .col-lg-2_5 {
    @include flex-basis(20%);
    width: 20%;
  }
  .col-lg-2 {
    @include flex-basis(16.66666667%);
    width: 16.66666667%;
  }
  .col-lg-1 {
    @include flex-basis(8.33333333%);
    width: 8.33333333%;
  }
}
@media screen and (min-width: 1921px) {
  .col-xl-12 {
    @include flex-basis(100%);
    width: 100%;
  }
  .col-xl-11 {
    @include flex-basis(91.66666667%);
    width: 91.66666667%;
  }
  .col-xl-10 {
    @include flex-basis(83.33333333%);
    width: 83.33333333%;
  }
  .col-xl-9 {
    @include flex-basis(75%);
    width: 75%;
  }
  .col-xl-8 {
    @include flex-basis(66.66666667%);
    width: 66.66666667%;
  }
  .col-xl-7 {
    @include flex-basis(58.33333333%);
    width: 58.33333333%;
  }
  .col-xl-6 {
    @include flex-basis(50%);
    width: 50%;
  }
  .col-xl-5 {
    @include flex-basis(41.66666667%);
    width: 41.66666667%;
  }
  .col-xl-4 {
    @include flex-basis(33.33333333%);
    width: 33.33333333%;
  }
  .col-xl-3 {
    @include flex-basis(25%);
    width: 25%;
  }
  .col-xl-2_5 {
    @include flex-basis(20%);
    width: 20%;
  }
  .col-xl-2 {
    @include flex-basis(16.66666667%);
    width: 16.66666667%;
  }
  .col-xl-1 {
    @include flex-basis(8.33333333%);
    width: 8.33333333%;
  }
}

@media screen and (max-width: 768px) {
  .top-line {
    height: unset;
  }
  .index_form_wrapper .index_form_group {
    @include flex-direction(column);
    margin-top: 0;
  }
  .w174,
  .w368,
  .w441 {
    width: 100% !important;
    @include flex-basis(unset !important);
    margin-left: 0 !important;
  }
  .index_form_wrapper .index_input_group {
    margin-top: 15px;
  }
  .related-products .rekated_h4 {
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .fcm-elem-wrapper .fcm-elem-mark {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 16px;
  }
  .fcm-elem-wrapper .fcm-elem-p {
    font-size: 14px;
    overflow: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
  }
  .company_profile .info {
    left: -170px;
    text-align: right;
  }
  .index_form_wrapper .index_input_label {
    font-size: 14px;
  }
  .mob-header-line {
    display: flex;
  }
  .index_form_wrapper .index_form_submit {
    margin-top: 15px;
  }
  .footer {
    padding: 10px;
  }
  .footer .footer-copyright {
    flex-direction: column;
    line-height: 1.5;
    margin-top: 0;
  }
  .footer .footer-top,
  .footer .footer-bg {
    display: none;
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .row2 {
    margin-left: 0;
    margin-right: 0;
  }

  .row3 {
    margin-left: 0;
    margin-right: 0;
  }

  .w1635 {
    width: 100%;
    max-width: unset;
  }

  .w1600 {
    width: 100%;
    max-width: unset;
  }

  .w1500 {
    width: 100%;
    max-width: unset;
  }

  .w1430 {
    width: 100%;
    max-width: unset;
  }

  .w1340 {
    width: 100%;
    max-width: unset;
  }

  .w1224 {
    width: 100%;
    max-width: unset;
  }

  .w1160 {
    width: 100%;
    max-width: unset;
  }

  .w1032 {
    width: 100%;
  }

  .w910 {
    width: 100%;
  }

  .w600 {
    width: 100%;
  }

  .top-line .header-line {
    display: none;
  }

  .header .header-section {
    left: 0;
    right: 0;
  }
  .header .header-center .hec-h2 {
    text-align: center;
    padding: 0 15px;
    height: unset;
  }
  .header .header-center .hec-p {
    margin-top: 15px;
    padding: 0 15px;
    text-align: center;
  }
  .banner-swiper .arrow-paging {
    left: 15px;
    bottom: 20px;
    top: unset;
  }
  .header .header-center.index-header-center {
    top: 50%;
  }
  .header .header-footer {
    display: none;
  }
}
